<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>[${examination.title}]考试</title>
<%@include file="../core/head.jsp"%>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<link rel="stylesheet" href="${ctx }/css/core.css" type="text/css">
<link rel="stylesheet" href="${ctx }/css/exam.css" type="text/css">
<link rel="stylesheet" href="${ctx }/css/buttons.css" type="text/css">
<script type="text/javascript" src="${ctx }/js/FusionCharts.js"></script>
<script type="text/javascript" src="${ctx }/js/modules/exam/exam.js"></script>
<script type="text/javascript" src="${ctx}/js/modules/code/AjaxAuthFilter.js"></script>
<script type="text/javascript" src="${ctx}/js/modules/code/MessageBox.js"></script>
<script type="text/javascript">

	var score = {
		online:true,
		unrecord:[],
		wrong : 0,
		correct : 0,
		num : "${fn:length(examination.questions)}",
		addWrong:function(){
			this.wrong++;
		},
		addRight:function(){
			this.correct++;
		},
		isFinish:function(){
			return this.num <= this.wrong+this.correct;
		},
		getScore:function(){
			var s = parseInt((this.correct/this.num)*100);
			return s+"%";
		}
	};
	
	

	function chooseAnswer(ques, value, langu) {
		var hiput = $("#answer" + ques).val(value);
		var radios = $("#" + ques + " ." + langu + " :radio");
		radios.each(function() {
			if (this.value == value) {
				this.checked = true;
				return;
			}
		});
	}
 
	
	function submitAnswer(ahis, qid, answ, unsureid, iswronginfo,sealExam) {
		var useranswer = $("#answer" + qid).val();
		var unsure = $("#" + unsureid);
		var boo = unsure.prop("checked");
		var quest = $("#" + qid);
		var hideuid = $("#hide"+qid);
		if (useranswer == "") {
			$.MessageBox.info("请选择一个答案");
		} else {
			var zhis = $(ahis);
			zhis.next().slideDown();
			var isWrong = useranswer != answ;
			if (isWrong) {
				quest.addClass("wrong");
				score.addWrong();
				$("#wrong").text(score.wrong);
				hideuid.show();
			
			} else {
				quest.removeClass("wrong");
				score.addRight();
				$("#correct").text(score.correct);
				if(sealExam||$("#autoRemove").get(0).checked==true){
					quest.hide();
				}else{
					hideuid.show();
				}
			}
			$("#" + qid + " :radio").attr("disabled", true);
			var state = 0;
			if (boo) {
				state = iswronginfo ? -1 : 1;
			}  ;
			var answerObject = {
					"answer.userId" : "${examination.userId}",
					"answer.questionId" : qid,
					"answer.examId" : "${examination.id}",
					"answer.userAnswer" : useranswer,
					"answer.corrAnswer" : answ,
					"answer.state" : state,
					"examination.paperId":"${examination.paperId}"
				};
			recorded(answerObject);
			unsure.parent().hide();
			zhis.hide();
			
			if(score.isFinish()){
				showScore();
				$("button").hide();
				$(".question").show();
				$(document).scrollTop(0); 
				alert("全部答完了，成绩："+score.getScore());
			}
			
		}

	}

	function showScore() {
		$("#chart").show();
		var dataxml = "<chart pieYScale='30' decimals='1'  showLabels='1' useRoundEdges='1' formatNumberScale='0' baseFont='宋体' "+
		"showValues='1' caption='考试成绩"+score.getScore()+"' pieSliceDepth='20' baseFontSize='12'    toolTipSepChar=' ' >"
				+ "<set label='正确' value='"+score.correct+"'  />" + "<set label='错误' value='"+score.wrong+"' /></chart>";

		var myChart = new FusionCharts("${ctx}/charts/Pie3D.swf", "myChartId", "500", 200);
		myChart.setDataXML(dataxml);
		myChart.render("chartdiv");

	}

	function recorded(answerObject) {
		
		$.ajax({
			cache : true,
			type : "POST",
			url : "${ctx}/exam/submitAnswer.action",
			data : answerObject,
			error : function(request) {
				if(score.online){
					$.MessageBox.info("转入离线模式");
					score.online = false;
				}
				score.unrecord[score.unrecord.length] = answerObject;
				$("#offlineNum").text("离线："+score.unrecord.length);
			},
			success : function(data) {
			if(!score.online){
				score.online = true;
				$.MessageBox.info("转入在线模式");
			}
			var pass = $.AjaxAuthFilter.checkSession("${ctx}/user/ajaxLogin.action",data,function(user){
					updateUser(user);
					recorded(answerObject);
				});
			
			if(pass){
				submitOulineData();
			}
			
			}
		});
		
		
	}
	function submitOulineData(){
		var data = undefined;
		 while(score.online &&(data = score. unrecord.pop())!=undefined){
				recorded(data);
				if(score.unrecord.length>0){
					$("#offlineNum").text("离线："+score.unrecord.length);
				}else{
					$("#offlineNum").text("");
				}
		 }
	}
	function hidQuestion(zhis,qid){
		$(zhis).hide();
		$("#" + qid).hide();
	}
	

	$(function(){
		$.MessageBox.info("试题加载完成",1);
	});
	 
</script>
 
</head>
<body>
 
<%@include file="top.jsp"%>
<div id="sidebar" >
	<div class="back"></div>
	<div class="front">
		<div class="center ">
				<table border="0">
					<tr><td class="title"><div style="width: 150px;" class="ellipsis">${examination.title}</div></td>
					 <td class="score">
					当前题数：<span>${fn:length(examination.questions) }</span>&nbsp;&nbsp;
					正确： <span id="correct" style="color: green; ">0</span> &nbsp;&nbsp;
					错误：<span id="wrong" style="color: red;">0</span> &nbsp;&nbsp;
					<span id="offlineNum" style="color: #666;"></span>
					</td>
					<td class="chlang">
					 <label>移除答对题目<input  type="checkbox" id="autoRemove"  ></label>
					 <label>中文<input class="language" type="checkbox" onclick="switchLanguage('chinese',this)" checked="checked"></label> 
					 <label>英文<input class="language" type="checkbox" onclick="switchLanguage('english',this)" checked="checked"></label>
					 </td>
					</tr>
				
				</table>
		</div>
	</div>
 </div>
 <div class="width center radius paper" >
	<div class="examname">
		<h1>${examination.title}</h1>
	</div>
	<div class="context">
		<div style=" display: none; " id="chart">
		 <div id="chartdiv" align="center" > </div>
		</div>
		<c:forEach var="quest"  varStatus="temp" items="${examination.questions}">
		<input type="hidden"   id="answer${quest.id}"/>
		<div class="question" id="${quest.id}">
			<label>[ 试题编号：${quest.no }&nbsp;&nbsp;&nbsp;&nbsp;章节：<z:dic code="${quest.chapter }"/> ]</label>
			<ul>
				<li class="english">
					<dl>
					
					<dt class="title">
						<span class="no">${temp.index+1}.</span>&nbsp;
						<c:out value="${quest.enSummary }"/>
					</dt> 
					<c:forEach var="opt" items="${quest.options }">
						<dd class="option">
							<label>
								<input type="radio" name="en${quest.id}" value="${opt.no}" onclick="chooseAnswer('${quest.id}',this.value,'chinese')" />
								${opt.no}.&nbsp;
								<span><c:out value="${opt.enSummary }"/></span>
							</label>
						</dd>
					</c:forEach>
					</dl>
				</li>
				<li class="chinese">
				<dl>
					<dt class="title">
						<span class="no">${temp.index+1}.</span>&nbsp;
						<c:out value="${quest.cnSummary }"/>
					</dt> 
					<c:forEach var="opt"  items="${quest.options }">
						<dd class="option">
							<label>
								<input type="radio"  name="cn${quest.id}"  value="${opt.no}" onclick="chooseAnswer('${quest.id}',this.value,'english')" />
								${opt.no}.&nbsp;
								<span><c:out value="${opt.cnSummary }"/></span>
							</label>
						</dd>
					</c:forEach>
					</dl>
				</li>
			</ul>
			
			<div align="right" >
				<label class="unsure"> <input type="checkbox" style="margin-top: -3px;" id="unsure${quest.id}"/>
				<s:if test="isWrongInfos">
					 移除至错题库 
				</s:if>
				<s:else>
					 添加至错题库  
				</s:else>
					 </label>
				<button class="button gray small" id="hide${quest.id}" style="display: none;" onclick="hidQuestion(this,'${quest.id}') ">隐藏</button>
				<button class="button green small" onclick="submitAnswer(this,'${quest.id}','${quest.answer}','unsure${quest.id}' , ${isWrongInfos} ,${sealExam });">校对答案</button>
				<c:if test="${!sealExam}">		
				<div class="help radius" align="left">
					<span class="answer">
						答案：
						<c:out value="${quest.answer }"/>
					</span> 
					<span class="analysis">
						<c:out value="${quest.analysis }"/>
					</span>
				</div>
				</c:if>
			</div>
		</div>
		</c:forEach>
	</div>
 </div>
 <%@include file="../core/bottom.jsp"%>
</body>
</html>
